<template>
  <view class="login-page">
    <view class="login-background">
      <view class="background-circles">
        <view class="circle circle-1"></view>
        <view class="circle circle-2"></view>
        <view class="circle circle-3"></view>
      </view>
    </view>

    <view class="content-wrapper">
      <view class="content-card">
        <view class="logo-container">
          <image class="logo" src="/static/logo.png" mode="aspectFit" />
          <view class="logo-glow"></view>
          <view class="medical-symbol">✚</view>
        </view>

        <view class="header-text">
          <view class="title">智慧医疗，健康守护</view>
          <view class="subtitle">三甲医院合作 · 数据加密保障</view>
          <view class="description"
            >微信一键登录，快速预约挂号、查看报告、在线问诊</view
          >
        </view>

        <view class="login-form">
          <view class="agreement">
            <van-checkbox
              :value="agreed"
              @change="onAgreeChange"
              class="agreement-checkbox"
            >
              <text class="agreement-text">登录即代表您同意 </text>
            </van-checkbox>
            <view class="agreement-links">
              <text class="link" @tap="openAgreement('privacy')"
                >《隐私政策》</text
              >
              <text class="separator">和</text>
              <text class="link" @tap="openAgreement('service')"
                >《用户协议》</text
              >
            </view>
          </view>

          <van-button
            type="primary"
            block
            round
            :loading="loading"
            :disabled="!agreed || loading"
            @click="loginHandler"
            class="login-button"
          >
            <text class="button-text">{{
              loading ? "登录中..." : "微信一键登录"
            }}</text>
          </van-button>
        </view>
      </view>

      <view class="footer">
        <text class="footer-text"
          >数据加密传输 · 国家三级等保认证 · 隐私严格保护</text
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { login as apiLogin, getInfo } from "../../api/user";
import { useUserStore } from "../../stores";

const userStore = useUserStore();
const agreed = ref(false);
const loading = ref(false);
const redirect = ref<string>("")
onLoad(() => {
  console.log("login页面onLoad");
  
});
onShow(() => {
  console.log("login页面onShow");
 
});

const onAgreeChange = (e: any) => {
  agreed.value = e.detail;
};

const openAgreement = async (type: "privacy" | "service") => {
  const title = type === "privacy" ? "隐私政策" : "用户协议";
  await uni.showModal({
    title,
    content: "请阅读并同意相关协议后继续使用本服务。",
    showCancel: false,
  });
};

const loginHandler = async () => {
  if (!agreed.value) {
    uni.showToast({ title: "请先阅读并同意协议", icon: "none" });
    return;
  }
  try {
    loading.value = true;
    const loginRes = await uni.login({
      provider: "weixin",
    });
    const code = loginRes.code;

    // 1) 后端登录，获取 token
    const res = await apiLogin(code);
    console.log(res);

    if (res.code === 200) {
      const token = typeof res.data === "string" ? res.data : res.data?.token;
      console.log("登录成功，token:", token);
      // 2) 先设置 token，确保后续请求头带上 Authorization
      if (token) {
        userStore.setToken(token);
      }
      // 3) 立即拉取用户信息并写入 Store，保证进入首页/个人中心时能立刻显示用户名
      try {
        const info = await getInfo();
        if (info?.code === 200) {
          userStore.setUserData(info.data);
        }
      } catch (e) {
        console.warn("获取用户信息失败（不影响登录跳转）", e);
      }

      // 成功提示
      uni.showToast({ title: "登录成功", icon: "success" });

      // 延迟跳转，给出成功提示的显示时间
      setTimeout(() => {
        uni.switchTab({ url: "/pages/index/index" });
      }, 600);
    } else {
      uni.showToast({
        title: (res as any).message || (res as any).msg || "登录失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("登录出错:", error);
    uni.showToast({
      title: "登录失败，请重试",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss">
.login-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #a8e6cf 0%, #dceef2 50%, #ffffff 100%);
}

.login-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;

  .background-circles {
    position: relative;
    width: 100%;
    height: 100%;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(12rpx);
      animation: float 6s ease-in-out infinite;

      &.circle-1 {
        width: 200rpx;
        height: 200rpx;
        top: 10%;
        left: -50rpx;
        animation-delay: 0s;
      }

      &.circle-2 {
        width: 300rpx;
        height: 300rpx;
        top: 60%;
        right: -100rpx;
        animation-delay: 2s;
      }

      &.circle-3 {
        width: 150rpx;
        height: 150rpx;
        top: 30%;
        right: 20%;
        animation-delay: 4s;
      }
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20rpx) rotate(180deg);
  }
}

.content-wrapper {
  position: relative;
  z-index: 1;
  padding: 80rpx 40rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
}

.content-card {
  width: 100%;
  max-width: 660rpx;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20rpx);
  border-radius: 32rpx;
  padding: 60rpx 50rpx 50rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1rpx solid rgba(230, 230, 230, 0.5);
}

.logo-container {
  position: relative;
  margin-bottom: 40rpx;

  .logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    box-shadow: 0 10rpx 30rpx rgba(66, 133, 244, 0.3);
  }

  .logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(102, 126, 234, 0.2) 0%,
      transparent 70%
    );
    animation: pulse 3s ease-in-out infinite;
  }

  .medical-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 60rpx;
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 2;
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

.header-text {
  text-align: center;
  margin-bottom: 60rpx;

  .title {
    font-size: 42rpx;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 16rpx;
    letter-spacing: 2rpx;
  }

  .subtitle {
    font-size: 32rpx;
    font-weight: 600;
    color: #4285f4;
    margin-bottom: 20rpx;
  }

  .description {
    font-size: 26rpx;
    color: #718096;
    line-height: 1.6;
  }
}

.login-form {
  width: 100%;
}

.agreement {
  margin-bottom: 40rpx;

  .agreement-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .agreement-text {
      font-size: 26rpx;
      color: #4a5568;
      margin-right: 8rpx;
    }
  }

  .agreement-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    .link {
      color: #4285f4;
      font-size: 26rpx;
      text-decoration: underline;
      font-weight: 500;
    }

    .separator {
      color: #718096;
      font-size: 26rpx;
      margin: 0 8rpx;
    }
  }
}

.login-button {
  height: 88rpx !important;
  background: linear-gradient(135deg, #4285f4 0%, #3367d6 100%) !important;
  border: none !important;
  box-shadow: 0 8rpx 24rpx rgba(66, 133, 244, 0.4);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(66, 133, 244, 0.3);
  }

  .button-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 2rpx;
  }
}

.footer {
  margin-top: 50rpx;

  .footer-text {
    font-size: 22rpx;
    color: rgba(100, 100, 100, 0.8);
    text-align: center;
    line-height: 1.6;
    font-weight: 400;
  }
}
</style>
